<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
	<title>Welcome @ Phoenix Media</title>
	<link rel="stylesheet" type="text/css" href="Content/Common/CSS/Reset.css" />
	<link rel="stylesheet" type="text/css" href="Content/Theme/Default/CSS/Global.css" />
	<script type="text/javascript" src="Content/Common/Scripts/JQuery.js"></script>
</head>

<body>
	<style type="text/css">
	html,
	body {
		height: 100%;
		width: 100%;
		overflow: hidden;
	}
	
	.swipe {
		height: 100%;
	}
	
	.swipe > ol > li {
		width: 15px;
		height: 15px;
		border-radius: 15px;
		background-color: #9FA0A0;
	}
	
	.swipe > ol > .active {
		background-color: #B30F13;
	}
	
	.follow {
		position: absolute;
		left: 20px;
		top: 20px;
		right: 20px;
		bottom: 20px;
		z-index: 2;
	}
	
	.follow h2 {
		font-size: 15pt;
		color: #333;
		line-height: 40px;
	}
	
	.follow .labels {
		text-align: center;
	}
	
	.follow label {
		display: inline-block;
		width: 90%;
		padding-top: 22%;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center top;
		margin-bottom: 10px;
		
		filter: alpha(opacity=50);
		-moz-opacity: 0.5;
		-khtml-opacity: 0.5;
		opacity: 0.5;
		
		position: relative;
	}
	
	.follow label:before {
		content: '';
		display: block;
		position: absolute;
		top: 5px;
		left: 5px;
		background-image: url(Content/Theme/Default/Images/unchecked.png);
		width: 25px;
		height: 25px;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 20px;
	}
	
	.follow label span {
		display: block;
		background-color: #666;
		line-height: 30px;
		color: #FFF;
	}
	
	.follow .labels input:checked + label {
		filter: alpha(opacity=100);
		-moz-opacity: 1;
		-khtml-opacity: 1;
		opacity: 01;
	}
	
	.follow .labels input:checked + label:before {
		background-image: url(Content/Theme/Default/Images/checked.png);
	}
	
	.follow .labels input:checked + label span {
		background-color: #B30F13;
	}
	
	.start {
		display: block;
		background-color: #B30F13;
		color: #FFF;
		font-size: 15pt;
		text-align: center;
		line-height: 40px;
		width: 150px;
		margin: 20px auto 0;
	}
	.swipe > .viewport > * {
		z-index: 1;
	}
	</style>
	<div id="swipe" class="swipe">
		<div class="viewport">
			<div style="background-image:url(Content/Theme/Default/Images/welcome-0.jpg)"></div>
			<div style="background-image:url(Content/Theme/Default/Images/welcome-1.jpg)"></div>
			<div style="background-image:url(Content/Theme/Default/Images/welcome-2.jpg)">
				<div class="follow">
					<h2>选择您关注的:</h2>
					<div class="labels">
						<input id="follow-0" type="checkbox" hidden="hidden" checked="checked" />
						<label for="follow-0" style="background-image:url(Content/Theme/Default/Images/wf-0.jpg);"><span>幼儿</span></label>
						<!--<input id="follow-1" type="checkbox" hidden="hidden" />
						<label for="follow-1" style="background-image:url(Content/Theme/Default/Images/wf-1.jpg);"><span>小学</span></label>-->
						<!--<input id="follow-2" type="checkbox" hidden="hidden" />
						<label for="follow-2" style="background-image:url(Content/Theme/Default/Images/wf-2.jpg);"><span>初中</span></label>-->
						<input id="follow-3" type="checkbox" hidden="hidden" />
						<label for="follow-3" style="background-image:url(Content/Theme/Default/Images/wf-3.jpg);"><span>高中</span></label>
						<input id="follow-4" type="checkbox" hidden="hidden" />
						<label for="follow-4" style="background-image:url(Content/Theme/Default/Images/wf-4.jpg);"><span>大学</span></label>
						<!--<input id="follow-5" type="checkbox" hidden="hidden" />
						<label for="follow-5" style="background-image:url(Content/Theme/Default/Images/wf-5.jpg);"><span>职场</span></label>-->
					</div>
					<a class="start" href="#">开始体验</a>
				</div>
			</div>
		 </div>
	</div>
	<script type="text/javascript" src="Content/Common/Scripts/Swipe.js"></script>
	<script type="text/javascript">
	var PhoenixMedia = PhoenixMedia || {};
	
	PhoenixMedia.Home = PhoenixMedia.Home || {};
	
	PhoenixMedia.Home.Swipe = (function()
	{
		var swipe = document.getElementById('swipe'),
			fragment = document.createDocumentFragment(),
			menu = document.createElement('ol'),
			pages = document.querySelectorAll('#swipe > div > div'),
			guide = [],
			_slide = function(event)
			{
				event = event || window.event;
				PhoenixMedia.Home.Swipe.slide(event.target.dataset.index);
			};
		
		for (var i = 0, l = pages.length; i < l; i++)
		{
			var li = document.createElement('li');
			
			!i && (li.className = 'active');
			
			li.dataset.index = i;
			li.addEventListener('click', _slide ,false);
	
			guide.push(li);
			fragment.appendChild(li);
		}
		
		menu.appendChild(fragment);
		swipe.appendChild(menu);
	
		return Swipe(swipe,
		{
			auto: 3000,
			callback: function (index, elements)
			{
				var i = guide.length;
				while (i--) guide[i].className = '';
	
				guide[index].className = 'active';
			}
		});
	})();
	</script>
</body>
</html>